<template>
  <view class="page">
    <view class="form">
      <view class="form-title">表单信息</view>
      <view class="form-item">
        <view class="form-item-hd">批次号</view>
        <view class="form-item-bd">{{model.batchId}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">渠道类型</view>
        <view class="form-item-bd">
          <js-select class="select" v-model="model.channelType" :disabled="true" dict-type="message_channel_type"
            itemLabel="dictValue" itemValue="dictKey"></js-select>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">接收号码</view>
        <view class="form-item-bd">{{model.receivers}}</view>
      </view>
      <view v-if="model.channelType == 2" class="form-item">
        <view class="form-item-hd">邮件标题</view>
        <view class="form-item-bd">{{model.title}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">{{model.channelType == 1 ? '短信内容' : '邮件内容'}}</view>
        <view class="form-item-bd">{{model.msgContent}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">提交状态</view>
        <view class="form-item-bd">
          <u-tag v-if="model.status=='2'" text="提交成功" type="success" />
          <u-tag v-else text="提交失败" type="error" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">发送状态</view>
        <view v-if="model.sendStatusName" class="form-item-bd">
          <u-tag v-if="model.sendStatus === '0'" :text="model.sendStatusName" type="success" />
          <u-tag v-else-if="model.sendStatus === '2'" :text="model.sendStatusName" type="warning" />
          <u-tag v-else :text="model.sendStatusName" type="error" />
        </view>
      </view>
      <view v-if="model.resultContent" class="form-item">
        <view class="form-item-hd">失败描述</view>
        <view class="form-item-bd">
          <u-tag :text="model.resultContent" type="error" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">发送时间</view>
        <view class="form-item-bd">{{model.createTime}}</view>
      </view>
      <view class="form-item">
        <view class="form-item-hd">发送人</view>
        <view class="form-item-bd">{{model.createUserName}}</view>
      </view>
    </view>
    <!-- <u-form class="form" :model="model" ref="uForm" label-position="left">
      <u-section title="表单信息" sub-title="" :arrow="false" line-color="blue"></u-section>
      <u-form-item label="批次号" prop="batchId" label-width="180" style="text-align: right;">
        <u-input v-model="model.batchId" type="text" maxlength="64" style="text-align: right;"
          :disabled="true">{{model.batchId}}</u-input>
        <text style="color: blue;border: 1rpx; border-color: aliceblue; margin-left: 20rpx;"
          @click="copy(model.batchId)">复制</text>
      </u-form-item>
      <u-form-item label="渠道类型" prop="channelType" label-width="180">
        <js-select v-model="model.channelType" :disabled="true" dict-type="message_channel_type" itemLabel="dictValue"
          itemValue="dictKey"></js-select>
      </u-form-item>
      <u-form-item label="接收号码" prop="receivers" label-width="180">
        <u-input v-model="seatVar" type="text" maxlength="64" :disabled="true"></u-input>
        {{model.receivers}}
      </u-form-item>
      <u-form-item label="邮件标题" prop="msgContent" label-width="180" v-if="model.channelType==2">
        <u-input v-model="model.title" type="text" maxlength="64" :disabled="true"></u-input>
      </u-form-item>
      <u-form-item :label="model.channelType==1?'短信内容':'邮件内容'" prop="msgContent" label-width="180">
        <u-input v-model="seatVar" type="text" maxlength="64" style="text-align: right;" :disabled="true"></u-input>
        {{model.msgContent}}
      </u-form-item>
      <u-form-item label="提交状态" prop="seatVar" label-width="180">
        <u-input v-model="seatVar" type="text" maxlength="64" style="text-align: right;" :disabled="true"></u-input>
        <u-tag v-if="model.status=='2'" text="提交成功" type="success" />
        <u-tag v-else text="提交失败" type="error" />
      </u-form-item>
      <u-form-item label="发送状态" prop="seatVar" label-width="180">
        <u-input v-model="seatVar" type="text" maxlength="64" style="text-align: right;" :disabled="true"></u-input>
        <u-tag v-if="model.sendStatus==='0'" :text="model.sendStatusName" type="success" />
        <u-tag v-else-if="model.sendStatus==='2'" :text="model.sendStatusName" type="warning" />
        <u-tag v-else :text="model.sendStatusName" type="error" />
      </u-form-item>
      <u-form-item label="失败描述" prop="seatVar" label-width="180"
        v-if="model.resultContent!=null && model.resultContent!=''">
        <u-input v-model="seatVar" type="text" maxlength="64" style="text-align: right;" :disabled="true"></u-input>
        <u-tag :text="model.resultContent" type="error" />
      </u-form-item>
      <u-form-item label="发送时间" prop="createTime" label-width="180">
        <u-input v-model="model.createTime" type="text" maxlength="64" style="text-align: right;"
          :disabled="true"></u-input>
      </u-form-item>
      <u-form-item label="发送人" prop="createUserName" label-width="180">
        <u-input v-model="model.createUserName" type="text" maxlength="64" style="text-align: right;"
          :disabled="true"></u-input>
      </u-form-item>
    </u-form> -->
  </view>
</template>
<script>
  import {
    validatenull
  } from '@/common/validate.js'
  export default {
    data() {
      return {
        model: {
          id: '',
          channelType: '',
          receivers: '',
          msgContent: '',
          sendType: '',
          sendDate: '',
          batchId: '',
          templateId: ''
        },
        seatVar: ' ',
        disabled: false
      };
    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.message.msgSendRecord.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          this.model.sendType = res.data.sendType.toString();
          this.model.channelType = res.data.channelType.toString();
          this.model.sendStatus = res.data.sendStatus.toString();
          this.model.statusName = res.data.status == 2 ? "提交成功" : "提交失败";
        });
      }
    },
    onReady() {

    },
    methods: {
      getStatusName(row) {
        if (row.sendStatus === 0) {
          return "发送成功";
        } else if (row.sendStatus === 2) {
          return "上游处理中";
        } else {
          return "发送失败";
        }
      },
      copy(batchId) {
        uni.setClipboardData({
          data: batchId,
          success: function() {
            uni.showToast({
              title: "复制成功",
              duration: 2000
            })
          }
        })
      },
      getStatusName(row) {
        if (row.sendStatus === 0) {
          return "发送成功";
        } else if (row.sendStatus === 2) {
          return "上游处理中";
        } else {
          return "发送失败";
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    background: #f7f7f7;
  }

  .form {
    height: 100%;
    background: #fff;
  }

  .form-title {
    position: relative;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -4rpx;
      display: inline-block;
      width: 8rpx;
      height: 40rpx;
      border-radius: 8rpx;
      background: #3989FC;
      transform: translateY(-50%);
    }
  }

  .form-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 40rpx 32rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    &::after {
      content: '';
      position: absolute;
      right: 32rpx;
      bottom: 0;
      left: 32rpx;
      display: block;
      border-bottom: 1px solid #eee;
    }
  }

  .form-item-hd {
    flex-shrink: 0;
    width: 116rpx;
    margin-right: 40rpx;
    text-align: left;
    font-weight: 700;
    color: #000;
  }

  .form-item-bd {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 40rpx;
    word-break: break-all;

    .select {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
    }
  }
</style>